<template>
  <view class="medal-ranking">
    <!-- 奖牌统计 -->
    <view class="medal-summary">
      <view class="medal-group">
        <image class="medal-icon" :src="imgUrl + 'goldMedal.png'" />
        <text class="medal-num">{{ medals.gold }}</text>
        <image class="medal-icon" :src="imgUrl + 'silverMedal.png'" />
        <text class="medal-num">{{ medals.silver }}</text>
        <image class="medal-icon" :src="imgUrl + 'bronzeMedal.png'" />
        <text class="medal-num">{{ medals.bronze }}</text>
      </view>
      <view class="medal-total">
        奖牌：<text class="total-num">{{ medals.total }}</text>
      </view>
    </view>
    <!-- 获奖成员列表 -->
    <view v-for="(item, idx) in list" :key="idx" class="medal-item">
      <image class="avatar" :src="item.avatar" />
      <view class="info">
        <view class="name">{{ item.name }}</view>
        <view class="group">{{ item.group }}</view>
        <view class="event">{{ item.event }}</view>
      </view>
      <view class="result">
        <text class="rank">{{ item.rank }}</text>
        <image class="medal-icon" :src="item.medalIcon" />
      </view>
    </view>
    <view class="divider" v-for="(item, idx) in list" :key="'div-'+idx" v-if="idx !== list.length-1"></view>
    <!-- 没有更多了 -->
    <view class="no-more">没有更多了</view>
  </view>
</template>

<script setup>
import { imgUrl } from '@/utils/config'
const medals = {
  gold: 49,
  silver: 30,
  bronze: 22,
  total: 112
}
const list = [
  {
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
    name: '李思雨',
    group: 'U13男子组',
    event: '60m',
    rank: '冠军',
    medalIcon: imgUrl + 'goldMedal.png'
  },
  {
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
    name: '李思雨',
    group: 'U13男子组',
    event: '60m',
    rank: '冠军',
    medalIcon: imgUrl + 'goldMedal.png'
  },
  {
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
    name: '李思雨',
    group: 'U13男子组',
    event: '60m',
    rank: '冠军',
    medalIcon: imgUrl + 'goldMedal.png'
  }
]
</script>

<style lang="scss" scoped>
.medal-ranking {
  background: #2D2E33;
  border-radius: 16rpx;
  padding: 0 0 16rpx 0;
  margin: 0 0 32rpx 0;

  .medal-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    height: 56rpx;
    font-size: 28rpx;
    color: #fff;
    font-weight: 600;
    .medal-group {
      display: flex;
      align-items: center;
      .medal-icon {
        width: 32rpx;
        height: 32rpx;
        margin: 0 8rpx 0 0;
        vertical-align: middle;
      }
      .medal-num {
        margin-right: 16rpx;
        font-size: 28rpx;
        color: #fff;
        font-weight: 500;
      }
    }
    .medal-total {
      font-size: 28rpx;
      color: #fff;
      .total-num {
        color: #ffd700;
        font-weight: 600;
      }
    }
  }

  .medal-item {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx 16rpx 24rpx;
    .avatar {
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
      margin-right: 16rpx;
      background: #fff;
      flex-shrink: 0;
    }
    .info {
      flex: 1;
      display: flex;
      align-items: center;
      .name {
        font-size: 28rpx;
        color: #fff;
        font-weight: 500;
        margin-right: 16rpx;
      }
      .group, .event {
        font-size: 26rpx;
        color: #ccc;
        margin-right: 16rpx;
      }
    }
    .result {
      display: flex;
      align-items: center;
      .rank {
        font-size: 28rpx;
        color: #fff;
        margin-right: 8rpx;
      }
      .medal-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .divider {
    height: 2rpx;
    background: #333;
    margin: 0 24rpx;
    border-radius: 1rpx;
    width: auto;
  }
  .no-more {
    text-align: center;
    color: #aaa;
    font-size: 26rpx;
    padding: 24rpx 0 0 0;
  }
}
</style>